html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  filter: contrast(8);
  background-color: #fff;
  overflow: hidden;
}
.text-wraper {
  position: absolute;
  bottom: 0;
  left: 30px;
  z-index: 99;
  color: #fff;
}

.container {
  width: 100%;
  height: 250px;
  position: absolute;
  bottom: 0;
  left: 0;
  &::after {
    content: "";
    position: absolute;
    top: -300px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    backdrop-filter: blur(5px);
  }
  .list {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #e9495a;
    .item {
      border-radius: 50%;
      background-color: #e9495a;
      position: absolute;
      @for $i from 1 through 500 {
        &:nth-child(#{$i}) {
          $width: random(120) + px;
          left: #{random(100) + "%"};
          bottom: #{random(200)}px;
          width: $width;
          height: $width;
          animation: move
            #{random(2) +
            1.5}s
            ease-in-out
            #{random(5)}s
            infinite;
        }
      }
    }
  }
}

@keyframes move {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
    transform: translate(-50%, -200px) scale(0.3);
  }
}
